import { useState, useEffect } from "react";
import { Form, Input, Alert } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { inventoryChange } from "../service";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
const MarkUnusalModal = ({ visible, query, fetchList, selectedRows, selectedWarehouse, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			const extractedList = selectedRows.map(obj => ({ warehouseId: obj.warehouseId, skuId: obj.skuId }));
			if (visible == 1) {
				extractedList.map(x => (x.actualNum = value.num));
				extractedList.map(x => (x.editFlag = true));
				extractedList.map(x => (x.businessType = "actual-num-count"));
			} else if (visible == 2) {
				extractedList.map(x => (x.defectiveNum = value.num));
				extractedList.map(x => (x.editFlag = true));
				extractedList.map(x => (x.businessType = "defective-num-count"));
			} else if (visible == 3) {
				extractedList.map(x => (x.changeActualNum = value.num));
				extractedList.map(x => (x.businessType = "add-stock-change"));
			} else if (visible == 4) {
				extractedList.map(x => (x.editFlag = true));
				extractedList.map(x => (x.highWarnValue = value.num2));
				extractedList.map(x => (x.lowWarnValue = value.num1));
			}
			const { success } = await inventoryChange(extractedList);
			if (success) {
				fetchList();
				onCancel();
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const renderAlertMsg = () => {
		return (
			<div>
				<div>注意：1、在原来的正品实际库存基础上直接增加数值</div>
				<div>2、注意一下原正品实际库存数是否有负数的情况</div>
			</div>
		);
	};
	return (
		<CommonModal
			title={{ title: visible == 1 ? "正品盘点" : visible == 2 ? "次品盘点" : visible == 3 ? "增加库存" : "设置预警值" }}
			visible={true}
			onOk={onOk}
			onCancel={onCancel}
			minHeight="150px"
		>
			{visible !== 4 && <SubTitle title="盘点详情" as="s2" symbol />}

			<Form form={form} name="mark-unuaual-modal">
				{visible == 3 && <Alert showIcon message={renderAlertMsg()} />}

				{visible !== 4 && (
					<Form.Item label="勾选商品数：" name="timeOutType" className="mt16">
						<div style={{ color: "rgba(240, 61, 41, 1)" }}>{selectedRows.length}</div>
					</Form.Item>
				)}
				{visible == 1 && (
					<Form.Item
						label=""
						name="num"
						rules={[
							{ required: true, message: "请输入需要更改正品实际库存数值" },
							{
								pattern: /^-?\d*$/,
								message: "请输入整数"
							}
						]}
					>
						<Input placeholder="请输入需要更改正品实际库存数值" />
					</Form.Item>
				)}
				{visible == 2 && (
					<Form.Item
						label=""
						name="num"
						rules={[
							{ required: true, message: "请输入需要更改次品实际库存数值" },
							{
								pattern: /^-?\d*$/,
								message: "请输入整数"
							}
						]}
					>
						<Input placeholder="请输入需要更改次品实际库存数值" />
					</Form.Item>
				)}
				{visible == 3 && (
					<Form.Item
						name="num"
						rules={[
							{ required: true, message: "请输入需要更改正品实际库存数值" },
							{
								pattern: /^-?\d*$/,
								message: "请输入整数"
							}
						]}
					>
						<Input placeholder="请输入需要更改正品实际库存数值" />
					</Form.Item>
				)}

				{visible == 4 && (
					<div>
						<Alert
							showIcon
							message={
								<Typography as="s1">
									注：低预警值：当正品实际数量小于等于低预警值 时，会显示红色预警提示，防止库存不足超卖
								</Typography>
							}
						/>
						<Form.Item
							label=""
							name="num1"
							className="mt16 "
							rules={[
								{
									pattern: /^-?\d*$/,
									message: "请输入整数"
								}
							]}
						>
							<Input placeholder="请输入低预警值" />
						</Form.Item>
						<Alert
							showIcon
							message={<Typography as="s1">高预警值：当正品实际数量大于高预警值时， 会显示黄色预警提示，防止货品积压</Typography>}
						/>
						<Form.Item
							label=""
							name="num2"
							className="mt16"
							rules={[
								{
									pattern: /^-?\d*$/,
									message: "请输入正整数"
								}
							]}
						>
							<Input placeholder="请输入高预警值" />
						</Form.Item>
					</div>
				)}
			</Form>
		</CommonModal>
	);
};

export default MarkUnusalModal;
